<template>
    <div>
        <div class="projectTable module-body">
            <el-table :data="projectList" v-loading="loading" :fit="true" style="width: 100%" size="mini">
               <el-table-column prop="id" label="ID" width="100">
                </el-table-column>
                <el-table-column prop="name" label="栏目名称" width="180">
                   <template slot-scope="scope">
                    <el-input v-if="scope.$index == 0 || scope.row.isEdit" v-model="scope.row.name" size="small" placeholder="请输入" />
                    <span v-else>{{scope.row.name}}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="desc" label="栏目描述" width="300">
                  <template slot-scope="scope">
                    <el-input v-if="scope.$index == 0 || scope.row.isEdit" v-model="scope.row.desc" size="small" placeholder="请输入" />
                    <span v-else>{{scope.row.desc}}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="status" label="启用">
                    <template slot-scope="scope">
                        <el-switch v-if="scope.$index == 0 || scope.row.isEdit" v-model="scope.row.status" active-color="#13ce66" inactive-color="#ff4949" size="small"></el-switch>
                        <el-switch v-else v-model="scope.row.status" active-color="#13ce66" inactive-color="#ff4949" size="small" disabled></el-switch>
                    </template>
                </el-table-column>
                <el-table-column prop="created_at" label="创建时间">
                </el-table-column>
                <el-table-column prop="updated_at" label="更新时间">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-row v-if="scope.$index == 0 || scope.row.isEdit">
                            <el-button type="success" icon="el-icon-check" size='mini' circle ></el-button>
                        </el-row>
                        <el-row v-else>
                            <el-button type="primary" icon="el-icon-edit" size='mini' circle @click="editProject(scope.row)"></el-button>
                            <el-button type="danger" icon="el-icon-delete" size='mini' circle @click="deleteLink"></el-button>
                        </el-row>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>


    
</template>



<script>
export default {
  name: 'projectColumn',
  data() {
    return {
      loading: true,
      projectList: [
         {
          id: '',
          name: "",
          desc: "",
          status: 1,
          created_at: "",
          updated_at: "",
          isEdit: false,
        },
        {
          id: 1,
          name: "个人项目",
          desc: "王小虎",
          created_at: "2018-10-10 09:09:08",
          updated_at: "2018-10-10 09:09:08",
          status: true,
          isEdit: false,
        },
        {
          id: 2,
          name: "个人项目",
          desc: "王小虎",
          created_at: "2018-10-10 09:09:08",
          updated_at: "2018-10-10 09:09:08",
          status: false,
          isEdit: false,
        },
        {
          id: 3,
          name: "个人项目",
          desc: "王小虎",
          created_at: "2018-10-10 09:09:08",
          updated_at: "2018-10-10 09:09:08",
          status: false,
          isEdit: false,
        },
        {
          id: 4,
          name: "个人项目",
          desc: "王小虎",
          created_at: "2018-10-10 09:09:08",
          updated_at: "2018-10-10 09:09:08",
          status: true,
          isEdit: false,
        },
      ],
       loading: false,
    };
  },
  methods: {
    editProject(row) {
      console.log(row)
            row.isEdit = true
    },
    deleteLink() {
        this.$swal({
           text: '你确定要删除此内容吗？',
           confirmButtonText:'删除'
        }).catch(this.$swal.noop).then(function() {
            console.log(111);
        //    this.$swal({
        //     type:'success',
        //     text: '已删除！',
        //     timer: 1000,
        //      "showConfirmButton": false,
        //      "showCancelButton": false,
        //    });
        });
    }
  }
};
</script>

<style lang="scss" scoped>
</style>


